<template>
  <p>count: {{ count }}</p>
  <button @click="fn">btn</button>
  <p>num: {{ num }}</p>
  <button @click="fn2(2)">+2</button>
  <button @click="fn2(3)">+3</button>
  <ul>
    <li v-for="item in oddList" :key="item">{{ item }}</li>
  </ul>

  <input type="text" @input="handleInput" />

  <child :num="num" :obj="obj"></child>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Child from "./Child.vue";

export interface ObjType {
  name: string;
  age: number;
  sex?: number;
}

interface DataType {
  count: number | string;
  list: number[];
  num: number;
  obj: ObjType;
}

// 组件需要defineComponent调用，使用它的返回值
export default defineComponent({
  // 对于data来说，可以使用interface，也可以使用as给每一个变量添加类型
  // data() {
  //   return {
  //     count: 1 as number | string,
  //     list: [1, 2, 3, 4, 5, 6] as number[],
  //   };
  // },
  data(): DataType {
    return {
      count: 1,
      list: [1, 2, 3, 4, 5, 6],
      num: 3,
      obj: { name: "zhangsan", age: 20, sex: 1 },
    };
  },

  // 计算属性的类型几乎可以不写，想写的话是给函数加类型
  computed: {
    oddList(): number[] {
      return this.list.filter((item: number) => item % 2);
    },
  },

  // 方法可以给返回值加类型
  methods: {
    fn(): void {
      // this.count++;
      this.count = "zhangsan";
    },
    fn2(n: number): void {
      this.num += n;
    },
    handleInput(e: Event) {
      console.log((e.target as HTMLInputElement).value);
    },
  },

  components: {
    Child,
  },
});
</script>
